<template>
  <div class="content">
    <p class="title">为什么选择我们</p>
    <p class="cont">良好的开场是成功的一半。正确的选择开设账户的公司是交易成功最主要的一个因素，因为您一切的交易运作都要通过它来完成英联国际金融集团,为您提供安全的资金保障、专业的市场讯息、丰富的交易品种、完善的外汇教学、先进图表工具及卓越优质的报价来进一步提升您的交易体验。</p>
    <div class="mode">
      <div class="one">
        <div class="left">
          <i></i>
          <p>B2B发展模式</p>
          <p>与合作伙伴无利益冲突</p>
        </div>
        <div class="right">
          <i></i>
          <p>监管合规</p>
          <p>资金安全有保障</p>
        </div>
      </div>
      <div class="two">
        <div class="left">
          <i></i>
          <p>深耕外汇市场多年</p>
          <p>客户遍及全球20多个国家</p>
        </div>
        <div class="right">
          <i></i>
          <p>流动性充沛</p>
          <p>与世界顶级流动性</p>
          <p>提供商深度合作</p>
        </div>
      </div>
      <div class="three">
        <div class="left">
          <i></i>
          <p>高速执行 稳定流畅</p>
          <p>国际最高规格服务器架构</p>
        </div>
        <div class="right">
          <i></i>
          <p>STP-ECN交易模式</p>
          <p>阳光下的透明交易</p>
        </div>
      </div>
    </div>
    <!-- 丰富的交易产品 -->
    <div class="products">
      <p>丰富的交易产品</p>
      <div class="cont">
        <div class="one">
          <i></i>
          <p>主流盘</p>
        </div>
        <div class="two">
          <i></i>
          <p>稀有盘</p>
        </div>
        <div class="three">
          <i></i>
          <p>黄金</p>
        </div>
        <div class="four">
          <i></i>
          <p>白银</p>
        </div>
        <div class="five">
          <i></i>
          <p>原油</p>
        </div>
      </div>
    </div>
    <!-- MT4 download -->
    <div class="download">
      <p>您拥有全球最值得信赖的交易平台</p>
      <p>Meta Trader4(MT4)</p>
      <p>英联国际提供我们的客户免费登入全球最受欢迎的交易平台 MT4！！只要下载UKDFX MT4平台即可于全球任何时间交易 </p>
      <p>投资，就是这么简单</p>
      <div class="down">
        <i></i>
        <div class="btn">
          <div class="android"><a href="http://i3.res.meizu.com/resources/appStore/browser/views/browser-detail.html?packageName=net.metaquotes.metatrader4&app_id=1158285&business=1"></a></div>
          <div class="ios"><a href="https://itunes.apple.com/cn/app/metatrader-4/id496212596?mt=8"></a></div>
        </div>
        <p>点击进入应用商店下载MT4 app，在MT4 app中直接选取UKD服务器</p>
      </div>
    </div>
    <!-- 立即加入 -->
    <div class="join">
      <p>你拥有全球最值得信赖的交易平台</p>
      <p>24小时成为交易高手，让你像专家一样交易</p>
      <p>在UKDFX交易平台,我们深信优质的教育和丰富的知识是您交易成功的关键。因此做为高度合规的外汇经济商，我们向您提供交易俱乐部外汇教育栏目：该栏目完全免费并且适合各个阶段的交易者，浅显易懂。涵盖了交易策略、市场、交易心理及风险管理等所有内容。我们与您一起，助理您成为梦想中的交易专家。加入UKDFX交易平台，马上成为交易高手吧！！！</p>
      <p class="join_btn"><a href=""></a></p>
    </div>
    <!-- 市场新闻及分析 -->
    <div class="news">
      <p>市场新闻及分析</p>
      <p>你可以直接从邮箱和MT4界面上获取每日外汇市场及交易条件的最新信息</p>
      <p>在UKDFX交易平台，我们深信优质的教育和丰富的知识是您交易成功的关键。因此做为高度合规的外汇经济商，我们向您提供交易俱乐部外汇教育栏目：该栏目完全免费并且适合各个阶段的交易者，浅显易懂。涵盖了交易策略、市场、交易心理及风险管理等所有内容。我们与您一起，助理您成为梦想中的交易专家。加入UKDFX交易平台，马上成为交易高手吧！</p>
      <div class="img">
        <div class="img1"></div>
        <div class="img2"></div>
        <div class="img3"></div>
      </div>
      <div class="pic">
        <div class="pic1"></div>
        <div class="pic2"></div>
        <div class="pic3"></div>
      </div>
    </div>
    <!-- 跑马灯 -->
    <div class="scrollobj" id="scrollobj" style="white-space:nowrap;overflow:hidden;width:100%;">
      <img src="./img/content/marquee.jpg" alt="">
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default{
    data (){
        return {

        }
    },
    mounted: function () {
      let that = this;
      let osc = document.querySelector('#scrollobj');
      let timer = null;
      clearInterval(timer);
      this.timer = setInterval(function(){
        that.oScroll(osc)
      },50);
    },
    beforeDestroy(){
      clearInterval(this.timer)
    },
    methods:{
      oScroll (obj) {
        let tmp = (obj.scrollLeft)++;
        //当滚动条到达右边顶端时
        if (obj.scrollLeft==tmp) obj.innerHTML += obj.innerHTML;
        //当滚动条滚动了初始内容的宽度时滚动条回到最左端
        if (obj.scrollLeft>=obj.firstChild.offsetWidth) obj.scrollLeft=0;
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import "../../common/stylus/mixin"

.content
  padding-top: 20px
  box-sizing: border-box
  p
    font-family: "苹方"
    padding-left: 18px
    padding-right: 18px
    &.title
      font-size: 18px
      color: #333
      font-weight: bold
      text-align: center
      margin-bottom: 10px
    &.cont
      font-size: 14px
      color: #333333
      line-height: 20px
  .mode
    padding-top: 20px
    padding-left: 18px
    padding-right: 18px
    margin-bottom: 34px
    .one
      display: flex
      justify-content: space-around
      align-items: center
      height: 128px
      text-align: center
      .left
        i
          display: block
          width: 59px
          height: 59px
          bg-image('./img/content/b2b')
          background-position: center center
          margin: 0 auto
          margin-bottom: 10px
        p
          &:nth-child(2)
            font-size: 14px
            font-weight: bold
            color: #333
          &:nth-child(3)
            font-size: 11px
            color: #666
      .right
        i
          display: block
          width: 59px
          height: 59px
          bg-image('./img/content/watch')
          background-position: center center
          margin: 0 auto
          margin-bottom: 10px
        p
          &:nth-child(2)
            font-size: 14px
            font-weight: bold
            color: #333
          &:nth-child(3)
            font-size: 11px
            color: #666
    .two
      display: flex
      justify-content: space-around
      text-align: center
      height: 128px
      .left
        i
          display: block
          width: 59px
          height: 59px
          bg-image('./img/content/market')
          background-position: center center
          margin: 0 auto
          margin-bottom: 10px
        p
          &:nth-child(2)
            font-size: 14px
            font-weight: bold
            color: #333
          &:nth-child(3)
            font-size: 11px
            color: #666
      .right
        i
          display: block
          width: 59px
          height: 59px
          bg-image('./img/content/flow')
          background-position: center center
          margin: 0 auto
          margin-bottom: 10px
        p
          &:nth-child(2)
            font-size: 14px
            font-weight: bold
            color: #333
          &:nth-child(3)
          &:nth-child(4)
            font-size: 11px
            color: #666
    .three
      display: flex
      justify-content: space-around
      align-items: center
      height: 128px
      text-align: center
      .left
        i
          display: block
          width: 59px
          height: 59px
          bg-image('./img/content/todo')
          background-position: center center
          margin: 0 auto
          margin-bottom: 10px
        p
          &:nth-child(2)
            font-size: 14px
            font-weight: bold
            color: #333
          &:nth-child(3)
            font-size: 11px
            color: #666
      .right
        i
          display: block
          width: 59px
          height: 59px
          bg-image('./img/content/mode')
          background-position: center center
          margin: 0 auto
          margin-bottom: 10px
        p
          &:nth-child(2)
            font-size: 14px
            font-weight: bold
            color: #333
          &:nth-child(3)
          &:nth-child(4)
            font-size: 11px
            color: #666
  .products
    width: 100%
    height: 150px
    background-color: #222
    padding-top: 20px
    p
      font-size: 18px
      color: #fff
      font-weight: bold
      text-align: center
      margin-bottom: 20px
    .cont
      display: flex
      div
        flex:1
        p
          font-size: 11px
          color: #fff
        &.one
          i
            display: block
            width: 44px
            height: 30px
            bg-image('./img/content/main')
            margin: 0 auto 10px
        &.two
          i
            display: block
            width: 44px
            height: 30px
            bg-image('./img/content/rare')
            margin: 0 auto 10px
        &.three
          i
            display: block
            width: 46px
            height: 33px
            bg-image('./img/content/gold')
            margin: 0 auto 10px
        &.four
          i
            display: block
            width: 45px
            height: 30px
            bg-image('./img/content/silver')
            margin: 0 auto 10px
        &.five
          i
            display: block
            width: 28px
            height: 33px
            bg-image('./img/content/oil')
            margin: 0 auto 10px
  .download
    padding-top: 20px
    p
      &:nth-child(1)
        font-size: 18px
        font-weight: bold
        color: #cc3333
        text-align: center
      &:nth-child(2)
        font-size: 16px
        color: #3366cc
      &:nth-child(3)
        font-size: 11px
        color: #666
      &:nth-child(4)
        font-size: 11px
        color: #3366cc
    .down
      margin-bottom: 20px
      i
        display: block
        width: 100%
        height: 137px
        bg-image('./img/content/download')
      .btn
        display: flex
        justify-content: space-around
        padding-left: 40px
        padding-right: 40px
        margin-top: 10px
        div
          width: 137px
          height: 37px
        .android
          a
            display: block
            width: 100%
            height: 100%
            bg-image('./img/content/android')
        .ios
          a
            display: block
            width: 100%
            height: 100%
            bg-image('./img/content/ios')
      p
        font-size: 11px
        color: #666
        margin-top: 20px
  .join
    width: 100%
    height: 261px
    bg-image('./img/content/bg')
    padding-top: 20px
    p
      &:nth-child(1)
        font-size: 18px
        text-align: center
        color: #fff
        margin-bottom: 20px
      &:nth-child(2)
        font-size: 12px
        color: #fff
        margin-bottom: 5px
      &:nth-child(3)
        font-size: 12px
        color: #fff
      &.join_btn
        width: 104px
        height: 26px
        margin: 0 auto
        margin-bottom: 20px
        margin-top: 15px
        padding: 0
        a
          display: block
          width: 100%
          height: 100%
          bg-image('./img/content/join')
  .news
    padding-top: 20px
    p
      color: #333
      text-align: left
      &:nth-child(1)
        font-size: 18px
        text-align: center
        font-weight: bold
        margin-bottom: 10px
      &:nth-child(2)
        font-size: 16px
        font-weight: bold
        margin-bottom: 10px
      &:nth-child(3)
        font-size: 12px
        margin-bottom: 20px
    .img
      display: flex
      justify-content: space-around
      padding: 0 25px
      margin: 10px
      div
        width: 113px
        height: 44px
        &.img1
          bg-image('./img/content/report')
        &.img2
          bg-image('./img/content/deal')
        &.img3
          bg-image('./img/content/tv')
    .pic
      display: flex
      justify-content: center
      margin-bottom: 20px
      div
        width: 108px
        height: 84px
        &.pic1
          bg-image('./img/content/pic1')
        &.pic2
          bg-image('./img/content/pic2')
        &.pic3
          bg-image('./img/content/pic3')
  .scrollobj
    height: 25px
    margin-bottom: 20px
    img
      width: 100%
      height: 100%
</style>
